<template>
  <div class="cart">
    <Tips />
    <van-checkbox-group
      v-if="cartList.length > 0"
      v-model="result"
      ref="checkboxGroup"
    >
      <van-checkbox
        :disabled="btnChange ? true : false"
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="chxClickFn(item)"
      >
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          >
            <template #footer>
              <van-stepper
                v-show="btnChange"
                v-model="item.number"
                integer
                min="1"
                @change="stepChange(item)"
              />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="delFn(item.product_id)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>

    <van-empty
      v-else
      class="custom-image"
      :image="require('../assets/cartEmpty.png')"
      description="购物车为空"
    />

    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <!-- 
        true表示不能点击
        什么情况下不能点击？
        1.处于编辑状态
        2.购物车总数量为0
      -->

      <van-checkbox
        class="txt"
        v-model="checkAll"
        @click="checkAllFn"
        :disabled="btnChange || cartTotal.goodsCount == 0 ? true : false"
        >全选</van-checkbox
      >
      <template #tip>
        累计共{{ cartTotal.goodsCount }}件商品，可点击
        <van-button
          class="btn"
          :type="btnChange ? 'danger' : 'primary'"
          size="small"
          :text="btnChange ? '完成编辑' : '编辑'"
          @click="onClick"
        ></van-button>
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>


<script>
let ifClickable = true; // ifClickable为true时用户才可以点击
import {
  GetCartDataApi,
  CartCheckedApi,
  StepChangeApi,
  CartDelApi,
} from "../request/api";
import Tips from "../components/Tips";
export default {
  data() {
    return {
      result: [],
      // 购物车商品信息
      cartList: [],
      cartTotal: {
        checkedGoodsAmount: 0,
        checkedGoodsCount: 0,
      },
      // 编辑 完成编辑
      btnChange: false,
    };
  },
  // 实时地计算（计算属性）
  computed: {
    // 全选
    checkAll: {
      get() {
        return (
          this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount &&
          this.cartTotal.goodsCount != 0
        );
      },
      set(val) {
        // console.log(val); // 得到变化后的全选状态
        // 想要切换这一项，就必须处于非编辑状态
        // 如果goodsCount==0，那就不应该给他点击
        if (this.btnChange && this.cartTotal.goodsCount == 0) {
          // this.$toast("编辑状态无法切换选项");
          return;
        } else {
          if (ifClickable) {
            ifClickable = false; // 阻止用户在本次请求成功之前去操作别的
            // 拿到cartList中每一个product_id，拼成一个数组，再把数组转字符串
            let myarr = [];
            this.cartList.map((item) => {
              myarr.push(item.product_id);
            });
            let str = myarr.join(); // 数组转字符串

            // 清空result这个数组
            this.result = [];
            CartCheckedApi({
              isChecked: val ? 1 : 0,
              productIds: str,
            }).then((res) => {
              this.successFn(res);
              ifClickable = true;
            });
          }
        }
      },
    },
  },
  created() {
    GetCartDataApi().then((res) => {
      this.successFn(res);
    });
  },
  methods: {
    // 点击提交订单
    onSubmit() {
      this.$toast("该功能暂未开通");
    },
    // 切换"编辑" "完成编辑"
    onClick() {
      if (this.btnChange == false) {
        this.btnChange = true;
      } else {
        this.btnChange = false;
      }
    },
    // 单个复选框点击事件
    chxClickFn(item) {
      if (this.btnChange) {
        // this.$toast("编辑状态无法切换选项");
        return;
      } else {
        // console.log(item);
        this.result = [];
        CartCheckedApi({
          isChecked: item.checked == 1 ? 0 : 1,
          productIds: item.product_id.toString(),
        }).then((res) => {
          this.successFn(res);
        });
      }
    },
    // 请求成功时封装的一个函数
    successFn(res) {
      if (res.errno == 0) {
        // console.log(res);
        this.cartList = res.data.cartList;
        this.cartTotal = res.data.cartTotal;

        // 把选中项的id传给result
        this.cartList.map((item) => {
          if (item.checked == 1) {
            // 被选中的项 [下次再操作result的时候，记得要清空]
            this.result.push(item.id);
          }
        });
      } else {
        this.$toast(res.errmsg);
      }
    },
    // 步进器值修改
    stepChange(item) {
      if (ifClickable) {
        ifClickable = false; // 阻止用户在本次请求成功之前去操作别的
        StepChangeApi({
          goodsId: item.goods_id,
          id: item.id,
          number: item.number,
          productId: item.product_id,
        }).then((res) => {
          this.successFn(res);
          ifClickable = true;
        });
      }
    },
    // 删除商品
    delFn(id) {
      CartDelApi({
        productIds: id.toString(),
      }).then((res) => {
        this.successFn(res);
      });
    },
  },
  components: { Tips },
};
</script>


<style lang="less" scoped>
.van-empty {
  margin-top: 80px;
}
.delete-button {
  height: 100%;
}
.cart {
  padding-bottom: 150px;
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
}
.van-submit-bar {
  bottom: 50px;
}
.btn {
  margin-left: 5px;
  margin-right: 5px;
}
/deep/.van-checkbox-group {
  background-color: #fff;
  padding: 0 10px;
  .van-checkbox {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    .van-checkbox__label {
      flex: 1;
      .van-card__title {
        line-height: 20px;
        font-size: 20px;
        margin-top: 20px;
      }
    }
  }
}
</style>